<script setup>
// ref：让数据具备响应式,需要加 .value
// reactive：让引用类型的数据具备响应式，不需要加 .value
import { ref, reactive } from 'vue'

const user = ref({
    name: '张三',
    age: 18
})

const obj = reactive({
    name: '王五',
    age: 20
})

function change() {
    user.value.name = '李四'

    obj.name = '李四'
    console.log(obj);

}

</script>

<template>
    <h1>组合式 API</h1>
    <h1>
        {{ user.name }} -- {{ user.age }}
    </h1>
    <h1>
        {{ obj.name }} -- {{ obj.age }}
    </h1>
    <button @click="change">修改名称</button>

</template>
